<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name='apple-touch-fullscreen' content='yes'>
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<meta name="format-detection" content="address=no">
		<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
		<title>点餐服务网站</title>
		<meta name="author" content="js代码" />
		<meta name="copyright" content="js代码" />
		<!--导航栏渐变开始-->
		<link rel="stylesheet" href="__STATIC__/home/css/reset.css">
		<link rel="stylesheet" type="text/css" href="__STATIC__/home/css/style.css" />
		<link rel="stylesheet" type="text/css" href="__STATIC__/home/css/swiper3.07.min.css" />
		<link rel="stylesheet" href="__STATIC__/home/css/index.css">
		<script src="__STATIC__/home/js/jquery.js"></script>
		<script src="__STATIC__/home/js/swiper.min.js"></script>
		<style>
			nav a {
			    display: block;
			    -webkit-box-flex: 1;
			    -moz-box-flex: 1;
			    text-align: center;
			    color: grey;
			    line-height: 1.2;
			    color: #666;
			    text-shadow: 0 1px 1px white;
			}
			.addclasstruenav{color: #3acd17;}	
			#slide{
				margin-top: 0;
			}
			
		</style>
		<!--地区参数传值-->
		
	</head>

	<body>
		<!--header-->
		<!-- <header >
			<a href="scanCode.html" class="location" id="location" data-title-type="native">
				<img src="__STATIC__/home/img/sys.png" />
			</a>

			<div class="top-sch-box flex-col logoIcon">
				<a>
					<aside class="index-searchArea">
						<input class="input-text-searchArea" type="text" placeholder="请输入餐品" />
						<input type="button" value="&#63;" class="input-searchBtn" />
					</aside>
				</a>
			</div>
			<a class="rt_searchIcon" href="map.html"><img style="width:70%;" src="__STATIC__/home/img/mapIcon.png"></a>
		</header> -->

		<!--slide-->
		<div id="slide" class="public-banner">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<a href="#">
						<img src="__STATIC__/home/upload/banner1.jpg" />
					</a>
				</div>
				<div class="swiper-slide">
					<a href="#">
						<img src="__STATIC__/home/upload/banner2.jpg" />
					</a>
				</div>
			</div>
			<div class="pagination"></div>
		</div>
		
	<!--今日促销-->	
	<div class="swiper-container">
	    <div class="swiper-wrapper">
			{volist name="hot_info" id="hot"}
	        <div class="swiper-slide">
	        	<div class="right-con con-active">
					<ul class="clearfix swiper-list">
						{volist name="hot" id="h"}
						<li>
							<div class="menu-img"><img src="{$h.img}" width="40" height="40" /></div>
							<div class="menu-txt">
								<h4>{$h.name}</h4>
								<p class="list2">
									<b>￥{$h.price}</b>
									<div class="btn">  
										 <button class="minus" onclick="incAction(this);">  
											 -
										 </button>  
										 <i class="numClass" food_id="{$h.food_id}">0</i>  
										  <button class="add" onclick="addAction(this);">  
											 +
										 </button>  
										 <i class="price">{$h.price}</i>  
									 </div> 
								</p>
							</div>
						</li>
						{/volist}
					</ul>
				</div> 
	        </div>
			{/volist}	        
	    </div>
	</div>
		
	<!--分类商品-->
	<div class="main" id="app">
	<div class="left-menu">
		<ul>
			{volist name="type_list" id="type"}
			   <li class="menu">{$type.type_name}</li> 
			{/volist} 
        </ul> 
	</div>
	<div class="con">
		<div class="right-con con-active">
			<ul id="test">
			</ul>
		</div>
	</div>
</div>
<div class="footer">  
	<div class="left">
		<span id="cartN">
			<img src="__STATIC__/home/img/shop_03.png"/>
			<span id="totalcountshow">0</span>
			<span class="totalpriceshow">￥<em id="totalpriceshow">0</em></span>
		</span>				
		</div>  
	<div class="right" style="width: 30%;">  
		<a id="btnselect" class="xhlbtn  disable" onclick="Buy(this);">去结算</a>  
	</div>   
	<div class="right" style="width: 30%;"> 
		<a id="btnselect" class="xhlbtn2 disable" onclick="addCart(this);">加入购物车</a>  
	</div>  
</div>
<div style="height:1.2rem;"></div>
{include file="../application/home/view/common/footer.html"}

<script src="__STATIC__/home/layui/layui.js" type="text/javascript" charset="utf-8"></script>

	<script language="javascript"> 
		var mySwiper = new Swiper('.swiper-container',{
			prevButton:'.swiper-button-prev',
			nextButton:'.swiper-button-next',
			})
	</script>
	<script>
		$(document).ready(function() {
			var storage=window.localStorage;
			storage.clear();
			$(".menu").first().addClass("active");
			$.ajax({
				type:'post',
				url:"/home/index/getFoodList",
				data:{type:'饮料'},
				dataType:'json',
				async:false,
				success:function(data){
					var html = "";
					for(var i=0;i<data.length;i++){    //遍历data数组
                        var ls = data[i];  
						html +='<li class="clearfix"><div class="menu-img"><img src='+ls.img+' width="55" height="55" /></div><div class="menu-txt"><h4>'+ls.name+'</h4><h2>￥'+ls.price+'</h2><p class="list1">剩余<em>'+ls.stock+'份</p><p class="list2"><div class="btn"><button class="minus" onclick="incAction(this);"><strong>-</strong></button><i class="numClass" food_id="'+ls.food_id+'">0</i><button class="add" onclick="addAction(this);"><strong>+</strong></button><i class="price">'+ls.price+'</i></div> </p></div></li>';
                    }
					storage["a"] = html;
                    $("#test").html(html);
                }
			});	
			var mySwiper = new Swiper('#slide', {
				autoplay: 5000,
				visibilityFullFit: true,
				loop: true,
				pagination: '.pagination',
			});
		});
	</script>
	<!--加减和tab切换-->
	<script type="text/javascript">
		$(function (){  
			var storage=window.localStorage;
			//菜单切换操作
			$(".menu").click(function(){
				$(".menu").removeClass("active");
				$(this).addClass("active");
				var type = $(this).text();
				if(type=='饮料'){
					html = storage.a;
	            	$("#test").html(html);
					return;
				}else if(type=='热销'){
					if(!storage.b){
						getFoodList(type);
						return;
					}
					else{
						html = storage.b;
		            	$("#test").html(html);
						return;
					}
				}else if(type=='小吃'){
					if(!storage.c){
						getFoodList(type);
						return;
					}else{
						html = storage.c;
		            	$("#test").html(html);
						return;
					}
				}else{
					if(!storage.d){
						getFoodList(type);
						return;
					}else{
						html = storage.d;
		            	$("#test").html(html);
						return;
					}
				}
			});
			function getFoodList(type){
				$.ajax({
					type:'post',
					data:{type:type},
					url:"/home/index/getFoodList",
					dataType:'json',
					async:false,
					success:function(data){
					//console.log(data);return;
					var html = "";
					for(var i=0;i<data.length;i++){    //遍历data数组
                        var ls = data[i];  
						html +='<li class="clearfix"><div class="menu-img"><img src='+ls.img+' width="55" height="55" /></div><div class="menu-txt"><h4>'+ls.name+'</h4><h2>￥'+ls.price+'</h2><p class="list1">剩余<em>'+ls.stock+'份</p><p class="list2"><div class="btn"><button class="minus" onclick="incAction(this);"><strong>-</strong></button><i class="numClass" food_id="'+ls.food_id+'">0</i><button class="add" onclick="addAction(this);"><strong>+</strong></button><i class="price">'+ls.price+'</i></div> </p></div></li>';
					}
                    $("#test").html(html);
					var type = $(".menu.active").text();
					if(type=='饮料'){
						storage["a"] = $("#test").html();
					}else if(type=='热销'){
						storage["b"] = $("#test").html();
					}else if(type=='小吃'){
						storage["c"] = $("#test").html();
					}else{
						storage["d"] = $("#test").html();
					}
                }
				});
			}
			//选项卡
			$(".con>div").hide();
			$(".con>div:eq(0)").show();	
		});  
		
		function addAction(a){
			var storage=window.localStorage;
			$(a).prevAll().css("display", "inline-block"); 
			var n = $(a).prev().text(); 
			var num = parseInt(n) + 1;  
			if (num == 0) { return; }  
			$(a).prev().text(num);  
			var danjia = $(a).next().text();//获取单价  
			var b = $("#totalpriceshow").html();//获取当前所选总价  
			$("#totalpriceshow").html((b * 1 + danjia * 1).toFixed(2));//计算当前所选总价  
			var nm = $("#totalcountshow").html();//获取数量  
			$("#totalcountshow").html(nm*1+1); 
			jss(); 
			var type = $(".menu.active").text();

			if(type=='饮料'){
				storage["a"] = $("#test").html();
			}else if(type=='热销'){
				storage["b"] = $("#test").html();
			}else if(type=='小吃'){
				storage["c"] = $("#test").html();
			}else{
				storage["d"] = $("#test").html();
			}

			if(!storage.g){
				var data={};
				var num = $(a).prev().text();
				var food_id = $(a).prev().attr("food_id");
				data[food_id] = num;
				var jsonStr = JSON.stringify(data); 
				storage["g"] = jsonStr;
			}else{
				var jsonStr = storage.g;
				var temp = JSON.parse(jsonStr);
				var num = $(a).prev().text();
				var food_id = $(a).prev().attr("food_id");
				temp[food_id] = num;
				var jsonStr2 = JSON.stringify(temp); 
				//console.log(temp);
				storage["g"] = jsonStr2;
			}
		}
			
		function incAction(a){
			var storage=window.localStorage;
			var n = $(a).next().text();  
			var num = parseInt(n) - 1;  
			$(a).next().text(num);//减1  
			var danjia = $(a).nextAll(".price").text();//获取单价  
			var b = $("#totalpriceshow").html();//获取当前所选总价  
			$("#totalpriceshow").html((b * 1 - danjia * 1).toFixed(2));//计算当前所选总价  
				
			var nm = $("#totalcountshow").html();//获取数量  
			$("#totalcountshow").html(nm * 1 - 1);  
			//如果数量小于或等于0则隐藏减号和数量  
			if (num <= 0) {
				$(a).next().css("display","none");  
				$(a).css("display","none");  
				jss();//改变按钮样式  
			} 
			var type = $(".menu.active").text();

			if(type=='饮料'){
				storage["a"] = $("#test").html();
			}else if(type=='热销'){
				storage["b"] = $("#test").html();
			}else if(type=='小吃'){
				storage["c"] = $("#test").html();
			}else{
				storage["d"] = $("#test").html();
			}

			var jsonStr = storage.g;
			var temp = JSON.parse(jsonStr);
			var num = $(a).next().text();
			var food_id = $(a).next().attr("food_id");
			temp[food_id] = num;
			if(temp[food_id]==0){
				delete temp[food_id];
			}
			var jsonStr2 = JSON.stringify(temp); 
			storage["g"] = jsonStr2;
		}

		function jss() {  
			var m = $("#totalcountshow").html();  
			if (m > 0) {  
				$(".right").find("a").removeClass("disable");  
			} else {  
				$(".right").find("a").addClass("disable");  
			}  
		};

		layui.use('layer', function(){
			var layer = layui.layer;
		}); 
		function addCart(a){
			var storage=window.localStorage;
			if($(a).hasClass('disable')){ return; }
			var data = storage.g;
			$.ajax({
				type:'post',
				data:{data:data},
				url:"/home/cart/addCartAction",
				dataType:'json',
				async:false,
				success:function(data){
					layer.msg("成功加入购物车",{
						time:2000,
						icon:6
					});
				}
			});
		}

		function Buy(a){
			var storage=window.localStorage;
			var countPrice = $("#totalpriceshow").text();
			var jsonStr = storage.g;
			if($(a).hasClass('disable')){ return; }
			$.ajax({
				type: 'post',
				url: "/home/order/createOrder",
				data: { jsonStr: jsonStr,sum:countPrice},
				dataType: 'json',
				async: false,
				success:function(data){
					if(data.status){
						layer.msg("成功创建订单",{
							time:2000,
							icon:6
						});
						setTimeout(function(){
							window.location.href='/home/order/setorder?order_id='+data.order_id;
						},2000);					
					}
				}
			});
		}
	</script>
</body>
</html>